<template>
  <div class="common-layout">
    <el-container>
		<el-header>
			<el-row :gutter="20">
			    <el-col :span="4"><div class="grid-content ep-bg-purple" ><el-tooltip
					        class="box-item"
					        effect="light"
					        content="我只是一个Logo"
					        placement="top"
					      >
					        Logo
					      </el-tooltip></div></el-col>
			    <el-col :span="16"><div class="grid-content ep-bg-purple" >图书管理系统</div></el-col>
			    <el-col :span="4">
					<div class="author" >
						 <span><el-link @click="onlogin" type="success">{{LoginText}}</el-link></span>
						<el-avatar
							v-show="authorShow"
					        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
					      />
					</div>
					
					
						  
				</el-col>
			  </el-row>
		</el-header>
      <el-container>
        <el-aside width="200px">
			<div class="aside">
				<Menu ref="childComp" @get-message="getMessage" @get-index="getIndex" @get-msg="getMsg"></Menu>
			</div>
		</el-aside>
        <el-container>
			<el-main>
				<el-row>
				    <el-col :span="24">
						<el-breadcrumb separator="/">
						    <el-breadcrumb-item :to="{ path: '/' }">{{first}}</el-breadcrumb-item>
						    <el-breadcrumb-item>
								<a href="/">{{second}}</a>
							</el-breadcrumb-item>
						</el-breadcrumb>
					</el-col>
				    <!-- 切换区域-->
					<div v-show=" first =='全部图书' ? true : false">
						<Card @get-msg="getMsg"/>
					</div>
					<div v-show=" first =='图书管理' ? true : false">
						<!-- 子组件传值 -->
						<Table @get-msg="getMsg"/>
					</div>
					<div v-show=" first =='我的借阅' ? true : false">
						<MyBorrow @get-msg="getMsg" ref="brrow"/>
					</div>
					<div v-show=" first =='个人信息' ? true : false">
						<My/>
					</div>
					<!-- <Table v-show="true"/> -->
				</el-row>
				
			</el-main>
			<el-footer>
				<div class="footer">
					 <el-tooltip
					        class="box-item"
					        effect="light"
					        content="每天都在进步"
					        placement="top"
					      >
					        by连虎
					      </el-tooltip>
				</div>
			</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
  
  <!-- 登录框-->
  <el-dialog v-model="centerDialogVisible" title="Login" width="40%" center>
      <span>
        <el-form :model="form" label-width="120px" style="width: 100%;">
            <el-form-item label="账号">
              <el-input v-model="form.name" placeholder="请输入您的账号"/>
            </el-form-item>
			<el-form-item label="密码">
			  <el-input v-model="form.password" show-password type="password" placeholder="请输入您的密码"/>
			</el-form-item>
        </el-form>	
		
      </span>
	  <p style="text-align: center;">
		  <el-link  type="info">没有账号?<router-link to="regist">注册</router-link></el-link>
			
	  </p>
	  
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">返回</el-button>
          <el-button type="primary" @click="login">
            登录
          </el-button>
        </span>
      </template>
    </el-dialog>
	
	<el-dialog v-model="exitlogin" title="退出登录" width="40%" center>
		  
	    <template #footer>
	      <span class="dialog-footer">
	        <el-button @click="exitlogin= false">返回</el-button>
	        <el-button type="primary" @click="exit">
	          确认退出
	        </el-button>
	      </span>
	    </template>
	</el-dialog>
</template>

<script setup>
import { ref,reactive, onMounted, getCurrentInstance } from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import Menu from '@/components/Menu.vue'
import Card from '@/components/BooksCard.vue'
import Table from '@/components/BooksTable.vue'
import MyBorrow from '@/components/MyBorrow.vue'
import My from '@/components/My.vue'

import Api from '../api'
import store from '../store'
// import { fa } from 'element-plus/es/locale'
//全局message
const {proxy} = getCurrentInstance()

// 初始化默认值
const first=ref('全部图书')
const second = ref('')
const form = reactive({
  name: '',
  password: '',
  
})
const rules =reactive
const getMessage = (msg) => {
	// 子向父传值
	first.value=msg
	console.log(msg)
}
/* 用来接收其他子组件的提示 */
const getMsg = (msg) => {
	// 子向父传值
	proxy.$message.success(msg)
}
const getIndex = (index) => {
	second.value = index
}
const LoginText = ref('登录')
const authorShow = ref(true)
const centerDialogVisible = ref(false)
const Login=()=>{}
const Route = useRoute();


onMounted(()=>{
	
	centerDialogVisible.value=Route.query.k
	
	if(localStorage.getItem('name')!=null){
		centerDialogVisible.value=false
		LoginText.value="你好,"+localStorage.getItem('name')
	}else{
		LoginText.value="登录"
	}
})
//给子组件传值H
const childComp = ref()
const brrow=ref()
const exitlogin=ref(false)
const exit=()=>{
	localStorage.removeItem('name');
	localStorage.removeItem('utype');
	localStorage.removeItem('id');
	exitlogin.value=false
	setTimeout(()=>{
		LoginText.value="登录"
		childComp.value.onHidden()
		brrow.value.mybow()
	},1000)
}
//登录与退出登录切换
const onlogin=()=>{
	if(localStorage.getItem('name')!=null){
		exitlogin.value=true
	}else{
		centerDialogVisible.value=true
	}
	
}
const login = ()=>{
	if(form.name==''||form.password==''){
		proxy.$message.error('账号或密码不能为空');
	}else{
		Api.loginApi(form).then(res=>{
			
			if(res.data.msg=="success"){
				store.commit('setToken',res.data.token)
				store.commit('setName',res.data.name)
				store.commit('setType',res.data.uType)
				store.commit('setId',res.data.id)
				proxy.$message.success('登录成功');
				setTimeout(()=>{
					LoginText.value="你好,"+localStorage.getItem('name')
					childComp.value.onHidden()
					brrow.value.mybow()
				},1000)
			}else{
				proxy.$message.error('账户或密码错误');
			}
		}).catch(error=>{
			console.log(error)
		})
		centerDialogVisible.value = false
	}
	
}

</script>
<style scoped>
	
	.dialog-footer button:first-child {
	  margin-right: 10px;
	}
	.author{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		float: right;
	}
	.author span {
		margin: 0 5px;
	}
	.el-container{
		height: 90vh;
	}
	.common-layout{
		text-align: center;
	}
	.el-header,
	.el-footer{
		background-color: #373d41;
		color: white;
		text-align: center;
		line-height: 60px;
	}
	
	.el-aside{
		background-color: #545c64;
		/* height: 100%; */
	}
	.el-main{
		background-color: #e5e9f2;
	}
	
	
</style>


